<!--<template>
  <div class="hello">
    <h1 style="text-align: center;">{{ msg }}</h1>

    <h3>Button</h3>
    <Button type="default">默认按钮</Button>
    <Button type="primary">主要按钮</Button>
    <Button type="info">信息按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="danger">危险按钮</Button>

    <h3>Cell</h3>
    <CellGroup>
      <Cell title='姓名' value='ELLE'></Cell>
      <Cell title='性别' value='女' label='哈哈哈哈哈哈'></Cell>
      <Cell value='只设置value'></Cell>
      <Cell title='单元格' value='内容垂直居中显示' label='描述' center></Cell>
    </CellGroup>

    <h3>Icon</h3>
    <Icon name="chat-o" size="20px" />
    <Icon name="chat-o" size="20px" color="orange" />
    <Icon name="chat-o" dot size="20px" />
    <Icon name="chat-o" badge="9" size="20px" />
    <Icon name="chat-o" badge="99+" size="20px" />

    <h3>Checkbox</h3>
    <checkbox v-model="checked">复选框</checkbox>
    <checkbox-group direction="horizontal" v-model="result">
      <Checkbox name="a">复选框a</Checkbox>
      <Checkbox name="b">复选框b</Checkbox>
    </checkbox-group>
    <Checkbox v-model="checked" shape="square">复选框B</Checkbox>
    <p>搭配单元格组件使用</p>
    <CheckboxGroup v-model="result">
      <CellGroup>
        <Cell
          v-for="(item, index) in list"
          clickable
          :key="item"
          :title="`复选框 ${item}`"
          @click="toggle(index)"
        >
          <Checkbox :name="item" ref="checkboxes"></Checkbox>
        </Cell>
      </CellGroup>
    </CheckboxGroup>

    <h3>Field输入框</h3>
    <Field v-model="value" placeholder="请输入用户名"></Field>
    <Field v-model="value" label="文本" placeholder="请输入文本"></Field>
    <!-- 输入手机号，调起手机号键盘 -->
    <!--<Field v-model="value" type="tel" label="手机号" />
    <Field v-model="value" label="用户名" error required />
    <Field v-model="value" type="passworld" label="密码" error required error-message="密码错误" />

    <Field
      v-model="value"
      center
      clearable
      label="短信验证码"
      placeholder="请输入短信验证码"
    >
      <template #button>
        <Button size="small" type="primary">发送验证码</Button>
      </template>
    </Field>
  </div>
</template>

<script>
import { Button, CellGroup, Cell, Icon, CheckboxGroup, Checkbox, Field } from 'vant'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Vant-ui',
      checked: true,
      list: ['a', 'b'],
      result: [],
      value: ''
    }
  },
  components: {
    Button,
    CellGroup,
    Cell,
    Icon,
    CheckboxGroup,
    Checkbox,
    Field
  },
  methods: {
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--<style scoped>

</style> -->
